<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				position: fixed;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				z-index: 2;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
				display: flex;
				align-items: center;
				width: 50px;
			}
			
			.header #backIcon span {
				font-size: 14px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom {
				width: 50px;
				text-align: right;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			footer {
				height: 40px;
				background-color: white;
				padding: 15px 20px;
				position: relative;
				background-color: #f5f5f5;
			}
			
			footer div {
				text-align: center;
			}
			
			footer div p {
				display: flex;
				justify-content: space-around;
				margin-bottom: 10px;
			}
			
			footer div p a {
				color: black;
				font-size: 14px;
				padding: 0 5px;
			}
			
			footer i {
				color: darkgrey;
				display: block;
			}
			
			.banner {
				margin-top: 50px;
				width: 100%;
				background-image: url(../../statics/images/cityWide/bannerBg.png);
				background-position: center;
				background-size: 100% 100%;
				height: 183px;
				box-sizing: border-box;
				padding: 15px 15px 0px 0px;
				color: white;
				display: flex;
				justify-content: space-between;
				border-bottom: 10px solid #F0F0F0;
			}
			
			.banner .address {
				height: 27px;
				line-height: 27px;
			}
			
			.banner .address img {
				padding: 0px 15px;
			}
			
			.banner .address .fixed {
				width: 16px;
				height: auto;
			}
			
			.banner .search {
				border: 1px solid rgba(255, 255, 255, 0.3);
				border-radius: 20px;
				background: rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				height: 25px;
				overflow: hidden;
				width: calc(100% - 150px);
			}
			
			.banner .search img {
				width: 15px;
				padding: 0 10px 0 17.5px;
			}
			
			.banner .search input {
				border: none;
				background: transparent;
				width: 190px;
				height: 25px;
				line-height: 25px;
				opacity: 1.2;
			}
			
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: white;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: white;
			}
			
			.activity {
				height: 147px;
				width: 100%;
				border-bottom: 10px solid #F0F0F0;
				display: flex;
				justify-content: space-between;
			}
			
			.activity .timeLimit {
				flex: 1;
				height: 100%;
				overflow: hidden;
				box-sizing: border-box;
				border-right: 1px solid #D6D6D6;
				display: flex;
			}
			
			.activity .timeLimit .left,
			.activity .timeLimit .right {
				flex: 1;
			}
			
			.activity .timeLimit .left img {
				padding: 25px 0 15px 16px;
				width: 75px;
			}
			
			.activity .timeLimit .left p {
				padding-left: 16px;
				font-size: 12px;
				color: #7f7f7f;
			}
			
			.activity .timeLimit .right {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
			}
			
			.activity .timeLimit .right img {
				padding-bottom: 20px;
				padding-right: 6px;
				width: 92px;
			}
			
			.activity .elseActivity {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			
			.activity .elseActivity .full {
				border-bottom: 1px solid #D6D6D6;
			}
			
			.activity .elseActivity .full,
			.activity .elseActivity .buyCarry {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 15px 0 18px;
			}
			
			.activity .elseActivity .fullCut h3 {
				font-size: 13px;
				font-weight: bolder;
			}
			
			.activity .elseActivity .fullCut p {
				font-size: 12px;
				color: #7f7f7f;
			}
			
			.activity .elseActivity .img img {
				width: 50px;
			}
			
			.main {
				width: 100%;
				text-align: center;
			}
			
			.main .title {
				border-bottom: 1px solid #D6D6D6;
				height: 50px;
				line-height: 50px;
				box-sizing: border-box;
			}
			
			.main .title span {
				color: #D6D6D6;
			}
			
			.main .title h3 {
				font-size: 15px;
				font-weight: 500;
				color-interpolation: #303030;
				padding: 0 10px;
				display: inline;
			}
			
			.main .shop-item {
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 12.5px 0 12.5px 12.5px;
				border-bottom: 1px solid #D6D6D6;
			}
			
			.main .shop-item .shopPic {
				width: 65px;
				height: 65px;
				margin-right: 15px;
			}
			
			.main .shop-item .info {
				display: flex;
				flex-direction: column;
				width: calc(100% - 80px);
			}
			
			.main .shop-item .info .introduce {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-content: space-around;
				height: 85px;
				text-align: left;
				border-bottom: 1px solid #D6D6D6;
				padding-bottom: 6px;
				box-sizing: border-box;
			}
			
			.main .shop-item .info .shopName p {
				font-size: 14px;
				color: #303030;
				font-weight: bolder;
				width: 95%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.main .shop-item .info .shopName span {
				font-size: 10px;
				padding: 3px;
				color: #ffa200;
				margin: 0 10px;
				border: 1px solid #FFA200;
			}
			
			.main .shop-item .info .assess {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 10px;
			}
			
			.main .shop-item .info .shopmessage {
				font-size: 10px;
				color: #969696;
			}
			
			.main .shop-item .info .shopmessage span {
				background: dodgerblue;
				color: white;
				padding: 2px;
				font-size: 10px;
				margin-right: 6px;
			}
			
			.main .shop-item .info .product {
				display: flex;
				width: 100%;
				/*justify-content: space-between;*/
				padding-right: 16px;
				box-sizing: border-box;
			}
			
			.main .shop-item .info .product .product-item {
				/*flex: 1;*/
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.main .shop-item .info .product .product-item img {
				width: 60px;
				padding: 10px 0px 6px;
			}
			
			.main .shop-item .info .product .product-item span {
				font-size: 13px;
				color: #676767;
			}
			
			.main .shop-item .info .product .product-item .price {
				color: #bfa567;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div><span>返回</span>
			</div>
			<div class="content">鲜花同城</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="banner">
			<div class="address">
				<img src="../../statics/images/cityWide/fixed.png" class="fixed" /><span id="address">萧山北线</span><img src="../../statics/images/cityWide/dropdown.png" />
			</div>
			<div class="search">
				<img src="../../statics/images/cityWide/search.png" alt="" />
				<form action="views/online.html?searchName=" method="get" role="search">
					<input type="search" name="searchName" id="" value="" placeholder="搜索你想要的商品" />
				</form>
			</div>
		</div>
		<div class="activity">
			<div class="timeLimit">
				<div class="left">
					<img src="../../statics/images/cityWide/timeLimit.png" />
					<p>洋桔梗24小时抢不停</p>
				</div>
				<div class="right">
					<img src="../../statics/images/cityWide/flower1.png" />
				</div>
			</div>
			<div class="elseActivity">
				<div class="full">
					<div class="fullCut">
						<h3>满减优惠</h3>
						<p>满200元减30元</p>
					</div>
					<div class="img">
						<img src="../../statics/images/cityWide/flower2.png" />
					</div>

				</div>
				<div class="buyCarry">
					<div class="fullCut">
						<h3>满减优惠</h3>
						<p>满200元减30元</p>
					</div>
					<div class="img">
						<img src="../../statics/images/cityWide/flower3.png" />
					</div>

				</div>
			</div>

		</div>
		<div class="main">
			<div class="title">
				<span>——————</span>
				<h3>附近的店铺</h3><span>——————</span>
			</div>
			<!--<div class="shop-item">
				<img src="../../statics/images/cityWide/shopPic1.png" class="shopPic" />
				<div class="info">
					<div class="introduce">
						<div class="shopName">
							<p>杨朵拉鲜花工坊(滨江店)<span>商家直达</span></p>
						</div>
						<div class="assess">
							<div class="star1"></div>
							<div class="distance">距您<span>2.4km</span></div>
						</div>
						<div class="shopmessage">
							<p><span>满增</span>全场购满200元，送多肉植物一只，限量50只。</p>
						</div>
					</div>
					<div class="product">
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower1.png" />
							<span>绣球</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower2.png" />
							<span>糖果雪山</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower3.png" />
							<span>尤加利</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower4.png" />
							<span>香水百合</span>
							<span class="price">29.9/株</span>
						</div>
					</div>
				</div>
			</div>
			<div class="shop-item">
				<img src="../../statics/images/cityWide/shopPic1.png" class="shopPic" />
				<div class="info">
					<div class="introduce">
						<div class="shopName">
							<p>杨朵拉鲜花工坊(滨江店)<span>商家直达</span></p>
						</div>
						<div class="assess">
							<div class="star2"></div>
							<div class="distance">距您<span>2.4km</span></div>
						</div>
						<div class="shopmessage">
							<p><span>满增</span>全场购满200元，送多肉植物一只，限量50只。</p>
						</div>
					</div>
					<div class="product">
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower1.png" />
							<span>绣球</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower2.png" />
							<span>糖果雪山</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower3.png" />
							<span>尤加利</span>
							<span class="price">29.9/株</span>
						</div>
						<div class="product-item">
							<img src="../../statics/images/cityWide/shopflower4.png" />
							<span>香水百合</span>
							<span class="price">29.9/株</span>
						</div>
					</div>
				</div>-->
		</div>
		</div>
		<footer>
			<div>
				<p>
					<a href="javascript:void(0);" title="">电脑版</a>
					|
					<a href="javascript:void(0);" title="">关于我们</a>
					|
					<a href="views/service.html" title="">联系我们</a>
				</p>
				<i>浙江家池科技有限公司</i>
			</div>
		</footer>

	</body>
	<script id="template" class="clearfix" type="text/html">
		<div class="shop-item" id="{{id}}">
			<img src="{{logo}}" class="shopPic" />
			<div class="info">
				<div class="introduce">
					<div class="shopName">
						<p>{{name}}<span>商家直达</span></p>
					</div>
					<div class="assess">
						<div class="star"></div>
						<!--<div class="distance">距您<span>2.4km</span></div>-->
					</div>
					<div class="shopmessage">
						<p><span>满增</span>{{notice}}</p>
					</div>
				</div>
				<div class="product">
					<div class="product-item">
						<img src="{{imgs}}" />
						<span>{{flowername}}</span>
						<span class="price">{{price}}/株</span>
					</div>
					<div class="product-item">
						<img src="../../statics/images/cityWide/shopflower1.png" />
						<span>{{flowername}}</span>
						<span class="price">{{price}}/株</span>
					</div>
					<div class="product-item">
						<img src="../../statics/images/cityWide/shopflower1.png" />
						<span>{{flowername}}</span>
						<span class="price">{{price}}/株</span>
					</div>
					<div class="product-item">
						<img src="../../statics/images/cityWide/shopflower1.png" />
						<span>{{flowername}}</span>
						<span class="price">{{price}}/株</span>
					</div>
				</div>
			</div>
		</div>
	</script>
	<script id="flowerTemplate" type="text/html">
		<div class="product-item">
			<img src="{{imgs}}" />
			<span>{{flowername}}</span>
			<span class="price">{{price}}/株</span>
		</div>
	</script>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/jquery.raty.min.js" type="text/javascript" charset="utf-8"></script>
	<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NF7KOFeygG0044MEx3jnRw0eW3GPtoL1"></script>
	<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>-->
	<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">
	</script>

	<script type="text/javascript">
		function star() {
			$.fn.raty.defaults.path = '../../statics/images/cityWide';
			$('.star1').raty({
				readOnly: true,
				score: 4
			});
			$('.star').raty({
				readOnly: true,
				score: 5
			});
			$('.star2').raty({
				readOnly: true,
				score: 4.50
			});
		};

		$(function() {
			if(localStorage['city']) {
				$("#address").html(localStorage['city']);
			}
			new FastClick(document.body);
		})
	</script>
	<script type="text/javascript">
		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		//		百度api
		//				function getAddress() {
		//					var map = new BMap.Map("allmap");
		//					var longitude, latitude;
		//					navigator.geolocation.getCurrentPosition(function(position) {
		//						longitude = position.coords.longitude;
		//						latitude = position.coords.latitude;
		//						var gpsPoint = new BMap.Point(longitude, latitude);
		//						alert(JSON.stringify(gpsPoint))
		//						BMap.Convertor.translate(gpsPoint, 0, function(point) {
		//							var geoc = new BMap.Geocoder();
		//							geoc.getLocation(point, function(rs) {
		//								var addComp = rs.addressComponents;
		//								alert(JSON.stringify(addComp))
		//								alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		//		                      $("#address").html(addComp.city+addComp.district)
		//							});
		//						});
		//					});
		//		
		//				}

		//		腾讯api
		var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
		var options = {
			timeout: 3000
		};

		function showPosition(position) {
			//			console.log(JSON.stringify(position, null, 4));
			if(position.type == "ip") {
				if(localStorage.city) {
					$("#address").html(localStorage.city);
					$.get(pathName + '/api/v2/flowercity/sellersbycity', {
						city: localStorage.city
					}, function(res) {
						var res = JSON.parse(res);
						console.log(res);
						addData(res, $(".main"));
						addFlowerData(res, $(".product"))

						$(".shop-item").on("click", function(e) {
							if(e.target.parentNode.getAttribute("class") == "product-item") {
								var id = $(this).attr("id");
								window.location.href = "shopInfo.html?id=" + id;
							}
						})
					});
				} else {
					localStorage.city = position.city;
					$("#address").html(position.city);
					$.get(pathName + '/api/v2/flowercity/sellersbycity', {
						city: position.city
					}, function(res) {
						var res = JSON.parse(res);
						console.log(res);
						addData(res, $(".main"));
						addFlowerData(res, $(".product"));
						$(".shop-item").on("click", function(e) {
							if(e.target.parentNode.getAttribute("class") == "product-item") {
								var id = $(this).attr("id");
								window.location.href = "shopInfo.html?id=" + id;
							}
						})
					});
				}

			} else {
				localStorage.city = position.city;
				$("#address").html(position.city);
				$.get(pathName + '/api/v2/flowercity/sellersbycity', {
					city: position.city
				}, function(res) {
					var res = JSON.parse(res);
					console.log(res);
					addData(res, $(".main"));
					addFlowerData(res, $(".product"))

					$(".shop-item").on("click", function(e) {
						if(e.target.parentNode.getAttribute("class") == "product-item") {
							var id = $(this).attr("id");
							window.location.href = "shopInfo.html?id=" + id;
						}
					})
				});
			}
		};

		function showErr() {
			alert("定位失败")
		};
		geolocation.getLocation(showPosition, showErr, options);
		$(".address").on("click", function() {
			window.location.href = "ChooseCity.html";
		})

		function addData(data, htm) {
			var html = '';
			var ul = "";
			if(data.code == 0) {
				for(var i = 0; i < data.data.length; i++) {
					//					console.log(data.data[i].flowers[0].name)
					var htmlm = $("#template").html();
					if(data.data[i].logo.replace(/\s+/g, "")) {
						htmlm = htmlm.replace(/\{\{logo\}\}/, data.data[i].logo);
					} else {
						htmlm = htmlm.replace(/\{\{logo\}\}/, "../../statics/images/cityWide/shopPic1.png");
					}
					if(data.data[i].notice == null) {
						htmlm = htmlm.replace(/\{\{notice\}\}/, "暂时没有活动！");
					} else {
						htmlm = htmlm.replace(/\{\{notice\}\}/, data.data[i].notice);
					}
					htmlm = htmlm.replace(/\{\{id\}\}/, data.data[i].sellerId);
					htmlm = htmlm.replace(/\{\{name\}\}/, data.data[i].sellerName);
//					htmlm = htmlm.replace(/\{\{flowername\}\}/g, data.data[i].flowers[0].flowerName);
//					htmlm = htmlm.replace(/\{\{price\}\}/g, data.data[i].flowers[0].money);
//					htmlm = htmlm.replace(/\{\{imgs\}\}/g, data.data[i].flowers[0].bigImg);
					html += htmlm;
				}
				//				htm.append(html);
				htm.append(html);
				star();

			} else {
				//				$(".noOrder").show()
				alert("没有商家")
			}
		}

		function addFlowerData(data, htm) {
			var html = '';
			if(data.code == 0) {
				for(var i = 0; i < data.data.length; i++) {
					for(var j = 0; j < data.data[i].flowers.length; j++) {
						var htmlm = $("#flowerTemplate").html();
						htmlm = htmlm.replace(/\{\{flowername\}\}/g, data.data[i].flowers[j].flowerName);
						htmlm = htmlm.replace(/\{\{price\}\}/g, data.data[i].flowers[j].money);
						htmlm = htmlm.replace(/\{\{imgs\}\}/g, data.data[i].flowers[j].bigImg);
						html += htmlm;
					}
					htm.eq(i).html(html);
					html = '';

				}
				//				htm.append(html);

			}
		}
	</script>

</html>